<template>
  <div>
    <el-dialog
      destroy-on-close
      :title="title"
      :visible.sync="visible"
      :close-on-click-modal="false"
      width="800px"
      @close="onClose"
      @open="onSearch"
    >
      <el-form class="searchForm" :inline="true" :model="queryForm" label-width="120px">
        <el-form-item label="展示部门" prop="orgname">
          <el-select
            v-model="queryForm.orgname"
            placeholder="请选择"
            clearable
            :disabled="select == undefined ? false : true"
          >
            <el-option v-for="item in datas" :key="item.orgid" :label="item.orgname" :value="item.orgname"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="onSearch">查询</el-button>
          <el-button v-if="select == undefined" type="primary" @click="onSubmit">确定</el-button>
        </el-form-item>
      </el-form>

      <el-table
        v-loading="loading"
        :data="tableData"
        element-loading-background="rgba(0, 0, 0, 0.8)"
        height="550"
        stripe
        border
        style="width: 100%"
        @selection-change="SelectionChange"
      >
        <!-- <el-table-column label="操作" width="50" fixed>
          <template slot-scope="scope">
            <span class="edit-tooltip">
              <el-tooltip effect="dark" content="选择" placement="bottom">
                <el-button type="text" @click="onChoose(scope.row)">
                  <svg-icon style="fill: #ff4e1d" icon-class="choose"></svg-icon>
                </el-button>
              </el-tooltip>
            </span>
          </template>
        </el-table-column> -->
        <el-table-column v-if="select != undefined" label="操作" width="50" fixed>
          <template slot-scope="scope">
            <span class="edit-tooltip">
              <el-tooltip effect="dark" content="选择" placement="bottom">
                <el-button type="text" @click="onChoosery(scope.row)">
                  <svg-icon style="fill: #ff4e1d" icon-class="choose"></svg-icon>
                </el-button>
              </el-tooltip>
            </span>
          </template>
        </el-table-column>
        <el-table-column v-else type="selection" width="55" align="center"> </el-table-column>
        <el-table-column :resizable="false" prop="username" label="姓名" min-width="100" />
        <el-table-column :resizable="false" prop="orgname" label="部门名称" min-width="120" />
        <el-table-column :resizable="false" prop="dutyname" label="岗位名称" min-width="120" />
        <!-- <el-table-column :resizable="false" prop="status" label="状态" min-width="120">
          <template slot-scope="scope">
            {{ scope.row.status == '1' ? '在职' : '离职' }}
          </template>
        </el-table-column> -->
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
import { Querylist } from '@/api/settings/renyuan'
import { QueryPageListAll } from '@/api/settings/bumen'
export default {
  name: 'renyuan',
  props: ['visiblesry', 'selection', 'orgname'],

  data() {
    return {
      orgnames: this.orgname,
      datas: [],
      queryForm: {},
      total: 0,
      tableData: [],
      SelectionData: [],
      visible: this.visiblesry,
      select: this.selection,
      title: '人员选择'
    }
  },
  // 这里用watch方法来监听父组件传过来的值，来实现实时更新
  watch: {
    visiblesry(val) {
      // message即为父组件的值，val参数为值
      this.visible = val // 将父组件的值赋给childrenMessage 子组件的值
    },
    selection(val) {
      // message即为父组件的值，val参数为值
      this.select = val // 将父组件的值赋给childrenMessage 子组件的值
    },
    orgname(val) {
      // message即为父组件的值，val参数为值
      this.queryForm.orgname = val
      this.orgname = val // 将父组件的值赋给childrenMessage 子组件的值
    }
  },
  created() {
    this.queryForm.orgname = this.orgnames
    this.onSearch()
  },
  methods: {
    async QueryPageListAll() {
      const { content } = await QueryPageListAll({})
      console.log(content)
      var res = []
      content.forEach(item => {
        if (item.showname != null) {
          res.push(item)
        }
      })
      this.datas = res
      console.log(this.datas)
    },
    // 查询数据
    async onSearch() {
      this.loading = true
      const { content } = await Querylist(this.queryForm)
      console.log(content)
      this.tableData = content
      // this.total = content.total
      this.QueryPageListAll()
      this.loading = false
    },
    // 点击关闭给父组件传值
    onClose() {
      this.$emit('fatherry')
    },
    SelectionChange(val) {
      this.SelectionData = val
    },
    // 点击对勾给父组件传值
    onSubmit(row) {
      this.$emit('onChoosery', this.SelectionData)
      this.$emit('fatherry')
    },
    onChoosery(row) {
      this.$emit('onChoosery', row)
      this.$emit('fatherry')
    }
  }
}
</script>

<style></style>
